---
title: Tailwind CSS Accordion - Components Library @David UI
description: Discover Tailwind CSS accordion components at David UI. Create expandable sections for FAQs, menus, and more with responsive, customizable designs.
github: accordion
prev: docs/react/text-area
next: docs/react/avatar
---

# Tailwind CSS Accordion

David UI's accordion component is built with Tailwind CSS and HTML to create sleek expand/collapse sections. Perfect for FAQs, menus, and content toggling, it provides an interactive way to organize information. 

Customize styles effortlessly and explore examples to integrate this versatile, responsive component into your design.


---

## Basic Accordion

Learn how to create a straightforward, responsive `Accordion` component. It's a versatile tool, perfect for including FAQ sections on your site.

<PreviewWithCode relativePath="accordion/accordion-demo.tsx" language="html" />

---

## Accordion All Open

Initialize all Accordion sections as expanded by default by providing an array of values to the `defaultValue` property.

<PreviewWithCode relativePath="accordion/accordion-all-open.tsx" language="html" />

---

## Controlled Accordion

The Accordion component can operate in both controlled and uncontrolled modes. In controlled mode, you have full control over its state using the `value` and `onValueChange` properties.

<PreviewWithCode relativePath="accordion/controlled-accordion.tsx" language="html" />

---

## Accordion Custom Icon

Personalize the icon for the Accordion trigger using the `Accordion.Trigger` component. By leveraging the `group-data-[open=true]` attribute, you can dynamically show or hide icons based on the Accordion state.

<PreviewWithCode relativePath="accordion/accordion-custom-icon.tsx" language="html" />

---

## Accordion Custom Styles

Tailor the appearance of your Accordion by applying styles through the `className` property. The example demonstrates how to design a unique look for the Accordion component.

<PreviewWithCode relativePath="accordion/accordion-custom-styles.tsx" language="html" />

---

## Accordion Disabled

Prevent user interaction with specific Accordion sections by applying the `disabled` property. Disabled items will not respond to user actions.

<PreviewWithCode relativePath="accordion/accordion-disabled.tsx" language="html" />
